<template>
  <!--  <b>欢迎来到xxx</b>-->
  <!--  <form action=""></form>-->
  <!--  <section class="banner">-->
  <!--    <form action="" method="post" class="form">-->
  <!--      <div class="form-title">-->
  <!--        <span class="o">短信登录</span>-->
  <!--        <span class="tw">账号登录</span>-->
  <!--      </div>-->
  <!--    </form>-->
  <!--  </section>-->
  <h1>欢迎来到xxx</h1>

  <div class="login">
    <n-space>
      <n-button strong secondary> 短信登录 </n-button>
      <n-button strong secondary> 账号登录 </n-button>
    </n-space>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          注册/登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules, TabsPaneContext } from "element-plus";

const ruleFormRef = ref<FormInstance>();

const validatePhone = (rule: any, value: any, callback: any) => {
  // rule = [{ type: "number", message: "手机号必须是数字" }];
  const regex = /^1[3-9]\d{9}$/;
  if (value === "") {
    callback(new Error("手机号不能为空！"));
  } else if (!regex.test(value)) {
    callback(new Error("手机号填写错误,请输入正确的手机号！"));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空！"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  phone: "",
  pass: "",
});

const rules = reactive<FormRules<typeof ruleForm>>({
  phone: [{ validator: validatePhone, trigger: "blur" }],
  pass: [{ validator: validatePass, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
    }
  });
};

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped>
h1 {
  position: absolute;
  z-index: 1;
  font-size: 35px;
  left: 1345px;
  top: 165px;
}

.login {
  border-radius: 25px;
  background-color: white;
  height: 449px;
  width: 483px;
  position: absolute;
  z-index: 1;
  left: 1200px;
  top: 255px;
  padding: 20px;
}

/*.o {
  position: relative;
  left: 10px;
  font: 22px;
}

.tw {
  font: bold 22px;
}*/

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
